import {
    Tree,
    Button,
    Tag,
    Modal,
    Form,
    Input,
    Select,
    Col,
    Row,
    Tabs,
    message,
  } from "antd";
  import { DeleteFilled } from "@ant-design/icons";
  import React from "react";
  import { useState, useEffect } from "react";
  import { useAuth } from "../../context/AuthProvider.js";
  import {
    getClass,
    getSub,
    getClassContext,
  } from "../../api/user.js";
  import{checkClassApi,disCheckClassApi}from "../../api/stu";
  import { getTeacher, getStu } from "../../api/user";
  const { Option } = Select;
  const treeData = [
    {
      title: "所有",
      key: "所有",
      children: [
        {
          title: "软件学院",
          key: "软件学院",
        },
        {
          title: "数学学院",
          key: "数学学院",
        },
        {
          title: "文学院",
          key: "文学院",
        },
      ],
    },
  ];

  const Check = () => {
    const { user, deleteUser } = useAuth();

    const [isShowContext, setIsShowContext] = useState(0);
    const [isModal, setIsModal] = useState([false, false, false]);
    const [classType, setClassType] = useState(1);
    const [classsub, setClasssub] = useState("所有");
    const [selectClass, setSelectClass] = useState(-1);

    const [allClass, setAllClass] = useState([]);
    const [classContext, setClassContext] = useState([]);
    const [classDetail, setClassDetail] = useState({ year: 0 });
    const [classTitle, setClassTitle] = useState("");
    const [sub, setSub] = useState([]);
    const [teacherList, setTeacherList] = useState([]);
    const [stuList, setStuList] = useState([]);
    const [loadings, setLoadings] = useState([false, false]);
    const timeOptions = [
      "第一节课",
      "第二节课",
      "第三节课",
      "第四节课",
      "第五节课",
      "第六节课",
      "第七节课",
      "第八节课",
      "第九节课",
    ];
    const dayOptions = [
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
      "星期日",
    ];
    const statusOptions = ["未开始", "课程中", "已结课"];
    const typeOptions = ["必修", "选修"];
    useEffect(() => {
      getTeacher().then((res) => {
        console.log(res, "teacher");
        setTeacherList(res.result);
        // setTotal(res.data.totalElements);
      });
    
  
      getClass({ classsub: "所有", classType }).then((res) => {
        console.log(res, "class");
        setAllClass(res);
        
      });
      getSub().then(res=>{
        console.log(res, "sub");
        setSub(res.result)
      })
    }, []);
    useEffect(() => {
      form.setFieldsValue(classDetail);
    }, [classDetail]);
    const [form] = Form.useForm();
    //  this.props.form.resetFields();
  
    const onSelect = (selectedKeys, info) => {
      console.log("selected", selectedKeys, info);
      setClasssub(selectedKeys);
      getClass({ classsub: selectedKeys, classType }).then((res) => {
        console.log(res, "class");
        setAllClass(res);
      });
    };
 
    // const onCheck = (checkedKeys, info) => {
    //   console.log('onCheck', checkedKeys, info);
    // };
    const showContext = (e, item, isShow) => {
      if (isShow) {
        setIsShowContext(0);
      } else {
        setIsShowContext(item.cid);
        setClassTitle(item.cname);
        getClassContext({ cname: item.cname }).then((res) => {
          setClassContext(res);
          console.log(res, "context");
          // console.log( res[0].student,res[0].student.includes(user.loginid))
         
        });
      }
    };
  
 

    const selectedClass = (e, index, item) => {
      setSelectClass(index);
      setClasssub(item.subname);
      console.log(item)
      getClass({ classsub: item.subname, classType:"1" }).then((res) => {
        console.log(res, "class");
       
        setAllClass(res);
      });
      // console.log(item);
    };
    const checkClass=(e,item)=>{
      checkClassApi({...item,id:user.loginid}).then(res=>{
        console.log(res)
        if(res.status=="ok"){
          message.success(res.result)
        }
        else{
          message.error(res.result)
        }
        getClassContext({ cname: item.classname }).then((res) => {
          setClassContext(res);
          console.log(res, "context");
          // console.log( res[0].student,res[0].student.includes(user.loginid))
         
        });
      })
    }
    const disCheckClass=(e,item)=>{
      disCheckClassApi({...item,id:user.loginid}).then(res=>{
        console.log(res)
        if(res.status=="ok"){
          message.success(res.result)
        }
        else{
          message.error(res.result)
        }
        getClassContext({ cname: item.classname }).then((res) => {
          setClassContext(res);
          console.log(res, "context");
          // console.log( res[0].student,res[0].student.includes(user.loginid))
         
        });
      })
    }
    return (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          justifyContent: "space-around",
        }}
      >
        <div style={{ width: "15%", height: "100%" }}>
        {sub.map((item, index) => {
          return (
            <div
              style={{
                width: "100%",
                display: "flex",
                justifyContent: "space-around",
                alignItems: "center",
                font: "17px bolder",
                borderRadius: "10px",
                margin: "10px",
                backgroundColor: selectClass == index ? "#A5E9FF" : "#fff",
                height:"32px"
              }}
              key={"tree" + index}
            >
              <a
                onClick={(e) => selectedClass(e, index, item)}
                style={{ color: "black" }}
              >
                {" "}
                <span> {item.subname}</span>
              </a>
           
            </div>
          );
        })}
        </div>
        <div style={{ backgroundColor: "#fff", width: "80%" }}>
         
          <div style={{ overflow: "auto", height: "90%" }}>
            {allClass.map((item, index) => {
              return (
                <div
                  key={item.cid}
                  style={{
                    border: "solid #ccc",
                    borderRadius: "12px",
                    margin: "auto",
                    width: "90%",
                    padding: "10px",
                    marginBottom: "10px",
                  }}
                >
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <div>
                      {item.cname}
                      <Button
                        type="link"
                        onClick={(e) =>
                          showContext(e, item, isShowContext == item.cid)
                        }
                      >
                        {isShowContext == item.cid ? "收回" : "展开"}
                      </Button>
                    </div>
                 
                  </div>
                  {isShowContext == item.cid && (
                    <div>
                      {classContext.map((item1, index1) => {
                        return item1.status==0&&(
                          <div
                            key={"context" + index1}
                            style={{
                              border: "2px",
                              borderBottomStyle: "solid",
                              width: "100%",
                              marginBottom: "10px",
                              display: "flex",
                              alignItems: "center",
                              justifyContent: "space-between",
                            }}
                          >
                            {/* <span>1</span>/ */}
                            <span  style={{  flex:1  }}>学年：{item1.year}</span>
                            <span style={{  flex:1  }}>
                              {dayOptions[item1.day - 1] +
                                " " +
                                timeOptions[item1.time - 1]}
                            </span>
                            <span style={{  flex:1  }}>
                              {teacherList.map(
                                (item2) =>
                                  item2.tid == item1.tid && (
                                    <div key={"teacherL" + item2.tid}>
                                      {item2.tname}老师
                                    </div>
                                  )
                              )}
                            </span>
                            <span style={{  flex:1  }}>地点：{item1.address}</span>
                            <span style={{  flex:1  }}>已选：{item1.student.length+"/"+item1.allNum}</span>
                            <span style={{  flex:1  }}>
                             {!item1.student.includes(user.loginid)&& <Button
                                type="link"
                                onClick={(e) => checkClass(e, item1)}
                              >
                                选择
                              </Button>}
                              {item1.student.includes(user.loginid)&& <Button
                                type="link"
                                onClick={(e) => disCheckClass(e, item1)}
                              >
                                取消选择
                              </Button>}
                            </span>
                          </div>
                        );
                      })}
                     
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        
        </div>
      
      </div>
    );
  };
  export default Check;
  